import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ModalService } from '@iux/live';

@Component({
  selector: 'app-demo1',
  templateUrl: './demo1.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Demo1Component implements OnInit {
  constructor(private modalService: ModalService) {}

  contentComponent = ModalCustomComponent;

  ngOnInit(): void {}

  open() {
    this.modalService.create({
      lvModalKey: `my_drawer_right`,
      lvType: 'drawer',
      lvWidth: 'M',
      lvOuterClosable: true,
      lvCloseButtonDisplay: true,
      lvDrawerPositionOffset: ['0px', '0px', '0px', '0px'],
      lvHeader: 'Modal Title',
      lvContent: this.contentComponent,
    });
  }
}

@Component({
  selector: 'app-drawer-custom-component',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <div>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
      </div>
    </div>
  `,
})
export class ModalCustomComponent {
  @Input() title = '';
}
